<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt topfixed-active">
			<uni-segmented-control 
			:current="current" 
			:values="items" 
			:style-type="styleType" 
			:active-color="activeColor" 
			@clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-if="current === 0">
				<uni-section title="所有支出" :subTitle="'共¥' + allTotalCost + '元'" type="circle"></uni-section>
				<text class="tips" v-if="allCost[0].length <= 0">无消费记录</text>
				<uni-list style="width:95%">
					<uni-list-item :title="item.nameList[0]" v-for="(item,index) in allCost[0].costLists"
					v-if="allCost[0].length != 0"
					:key="index"
					:note="item.nameList[0] +'->'+ item.nameList[1]" 
					:rightText="'¥' +  item.cost + '元'" />
				</uni-list>
			</view>
			<view v-if="current === 1">
				<uni-section title="所有支出" :subTitle="'共¥' + allTotalCost + '元'" type="circle"></uni-section>
				<text class="tips" v-if="allCost.length <= 0">无消费记录</text>
				<uni-list style="width:95%" 
				v-for="(item,index) in allCost" 
				:key="index">
					<uni-section v-if="item.totalCost > 0" :title="item.project.name" :subTitle="'共¥' + item.totalCost + '元'" type="line"></uni-section>
					<uni-list-item v-if="item.costLists.length != 0" :title="subItem.nameList[0]" v-for="(subItem,subIndex) in item.costLists"
					:key="subIndex"
					:note="subItem.nameList[1]" 
					:rightText="'¥' +  subItem.cost + '元'" />
				</uni-list>
			</view>
			<view v-if="current === 2">
				<uni-section title="所有支出" :subTitle="'共¥' + allTotalCost + '元'" type="circle"></uni-section>
				<text class="tips" v-if="allTotalCost == 0">无消费记录</text>
				<uni-list style="width:95%" 
				v-for="(item,index) in allCost" 
				:key="index">
					<uni-section v-if="item.totalCost > 0" :title="item.costCategory.parentName" :subTitle="'共¥' + item.totalCost + '元'" type="line"></uni-section>
					<uni-list-item v-if="item.costLists != null && item.costLists.length != 0" :title="subItem.nameList[0]" v-for="(subItem,subIndex) in item.costLists"
					:key="subIndex"
					:note="subItem.nameList[1]" 
					:rightText="'¥' +  subItem.cost + '元'" />
				</uni-list>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				allTotalCost: 0,
				allCost: [],
				costList: [],
				costListByProject: [],
				costListByCategory: [],
				items: ['全部', '按工程', '按类别'],
				current: 0,
				activeColor: '#007aff',
				styleType: 'button'
			}
		},
		onLoad() {
			this.getCostList(0);
		},
		onShow() {
			this.isLogin = this.$dry.isLogin();
			if(!this.isLogin){
				uni.showModal({
					title: "信息",
					content: "需要登录后查看，去登录",
					showCancel: false,
					confirmText: "确定",
					success: function (res) {
						if (res.confirm) {
							uni.switchTab({
								url: '../user/user',
							})
						}
					}
				});
			}
			else {
				this.getCostList(0);
			}
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '大家都在用这款小工具管理项目，快来试试吧！！！',
		      path: '/pages/index/index'
		    }
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
					this.getCostList(this.current);
				}
			},
			getCostList(index) {
				var token = this.$dry.getToken();
				if(token){
				    var data = {};
					var queryData = {
							"owner": this.$dry.get("user").userId
						};
					if(index === 0){
						data = this.$request.run("getCostListByOwner",token);
					}
					if(index === 1){
						data = this.$request.run("getCostListByProject",token);
					}
					if(index === 2){
						data = this.$request.run("getCostListByCostCategory",token);
					}
				    uni.request({
				    	url: data.url,
						method: data.method,
						header: data.header,
				    	data: queryData,
				    	success: data => {
							var allCost = [data.data];
							var allTotalCost = 0;
							var result = [];
							if(index === 0) {
								result = allCost;
							} else {
								result = allCost[0];
							}
							if(result.length > 0) {
								result.forEach(e => {
									allTotalCost += e.totalCost == null || e.totalCost == '' ? 0 : e.totalCost;
								})
								this.allTotalCost = allTotalCost;
							} else {
								this.allTotalCost = 0;
							}
							this.allCost = result;
				    		
				    	},
				    	fail: (data, code) => {
				    		console.log('fail' + JSON.stringify(data));
				    	}
				    })
				}
			},
			getCostListByProject() {
				var allCost = this.allCost;
				var costCategory = uni.getStorageSync("cost_category");
				var project = uni.getStorageSync("project").list;
				var newList = [];
				project.forEach(pc =>{
					var children = [];
					var totalCost = 0;
					allCost.forEach(e => {
						if(e.dry_project == pc.id){
							costCategory.forEach(p => {
								p.children.forEach(c => {
									if(c.id == e.dry_cost_category){
										totalCost += Number(e.dry_cost);
										children.push({
											parent_id: p.id,
											parent_name: p.text,
											child_id: c.id,
											child_name:c.text,
											cost: e.dry_cost,
										})
									}
								})
							})
						}
					})
					newList.push({
						id: pc.id,
						project_name: pc.dry_name,
						totalCost: totalCost,
						children: children
					})
				})
				this.costListByProject = newList;
			},
			getCostListByCategory() {
				var allCost = this.allCost;
				var costCategory = uni.getStorageSync("cost_category");
				var newList = [];
				costCategory.forEach(p => {
					var children = [];
					var totalCost = 0;
					p.children.forEach(c => {
						allCost.forEach(e => {
							if(c.id == e.dry_cost_category){
								totalCost += Number(e.dry_cost);
								children.push({
									parent_id: p.id,
									parent_name: p.text,
									child_id: c.id,
									child_name:c.text,
									cost: e.dry_cost,
								})
							}
						})
					})
					newList.push({
						id: p.id,
						category_name: p.text,
						totalCost: totalCost,
						children:children
					})
				})
				this.costListByCategory = newList;
			},
		}
	}
</script>

<style scoped>
	.uni-common-mt {
		margin-top: 30px;
	}
	
	.uni-padding-wrap {
		padding: 0px 30px;
	}
	.content {
		margin-top: 80px;
	}
	
	.content-text {
		font-size: 18px;
		color: #333;
	}
	.topfixed-active{
	    width: 100%;
	    position: fixed;
	    top: var(--window-top);
	    left: 0;
	    background: #fff;
	    z-index: 9;
	    box-sizing: border-box;
	}
	.tips{
		padding:10rpx 20rpx;
		text-align: left;
		font-size: 24rpx;
		color: #0077AA;
	}
</style>
